<template>
	<div :class="class1 ? 'class1 header-bar-center' : 'header-bar-center '">
		<ul class="bar-bilibili">
			<li class="left-bili">
				<a href="#">
					<img src="./images/Snipaste_2022-04-15_17-24-43.png" alt="bilibili" />
					<div class="left-shouye">
						<span class="left-one">首页</span>

						<span class="iconfont icon-xiangxia"></span>
					</div>
				</a>
			</li>
			<li>
				<a href="#">番剧</a>
			</li>
			<li>
				<a href="#">直播</a>
			</li>
			<li>
				<a href="#">游戏中心</a>
			</li>
			<li>
				<a href="#">会员购</a>
			</li>
			<li>
				<a href="#">漫画</a>
			</li>
			<li>
				<a href="#">赛事</a>
			</li>
		</ul>
		<div class="bar-search">
			<div class="search-center">
				<form class="search-form">
					<input
						class="search-box"
						type="text"
						placeholder="智商天花板，亦有差距"
					/>
					<span class="iconfont icon-Magnifier"></span>
				</form>
			</div>
		</div>
		<ul class="bar-user">
			<li class="user-img v-popover-wrap" @click="loginHandler">
				<div class="img-info">
					<!-- <img
						src="./images/ab7e62e6341b5d94d46deb7a37fb16c15e1c57e8.jpg@240w_240h_1c_1s.webp"
							class="imger"
							alt="用户头像"
						/> -->
				</div>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-huiyuan"></span>
				<span>大会员</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-xiaoxi1"></span>
				<span>消息</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-dongtai"></span>
				<span>动态</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-shoucang"></span>
				<span>收藏</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-lishi"></span>
				<span>历史</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-dengpao"></span>
				<span>创作中心</span>
			</li>
			<li class="v-popover-wrap">
				<div class="pushWord">
					<span class="iconfont icon-shangchuan1"></span>
					<span>投稿</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
  name:"HeaderNav"
};
</script>

<style lang="less" scoped>
.header-bar-center {
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px 0 24px;
		opacity: 100%;
		// background-color: none;
		// max-width: 2560px;
		// min-width: 1080px;
		width: 100%;
		height: 64px;
		box-sizing: border-box;
		.bar-bilibili {
			list-style-type: none;
			padding: 0;
			display: flex;
			align-items: center;
			flex-shrink: 0;
			li {
				position: relative;
				a {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 56px;
					text-decoration: none;
					color: #18191c;
					font-size: 13px;
					margin-right: 10px;
				}
			}
			.left-bili {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 56px;
				img {
					width: 60px;
					margin-right: 10px;
				}
				.left-shouye {
					display: flex;
					align-items: center;
					text-align: center;
					font-size: 14px;
					line-height: 20px;
					cursor: pointer;
					.left-one {
						display: inline-block;
						margin-right: 5px;
					}
					.icon-xiangxia {
						font-size: 5px;
					}
				}
			}
		}
		.bar-search {
			margin: 0 10px;
			flex: 1 auto;
			height: 38px;

			.search-center {
				position: relative;
				margin: 0 auto;
				.search-form {
					display: flex;
					align-items: center;
					padding: 0 48px 0 4px;
					position: relative;
					z-index: 1;
					overflow: hidden;
					line-height: 38px;
					// border: 1px solid #eae9eb;
					height: 40px;
					background-color: #eae9eb;
					opacity: 0.9;
					transition: background-color 0.3s;
					border-radius: 5px;
					// border: 1px solid var(--line_regular);
					border-bottom: none;
					// background: var(--bg1);
					&:hover {
						background-color: #fff;
					}
					.search-box {
						color: #61666d;
						// background-color: #eae9eb;
						background-color: transparent;
						flex: 1;
						overflow: hidden;
						padding-left: 8px;
						box-shadow: none;
						font-size: 14px;
						line-height: 25px;
						border: none;

						&:focus {
							border-radius: 5px;
							outline: none;
							background-color: #eae6e7;
						}
					}
					.icon-Magnifier {
						// border: 1px solid #000;
						position: absolute;
						top: 3px;
						right: 7px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0;
						padding: 0;
						width: 32px;
						height: 32px;
						border: none;
						border-radius: 6px;
						color: #29272b;
						line-height: 32px;
						cursor: pointer;
						transition: background-color 0.3s;
						&:hover {
							background-color: #eae9eb;
						}
					}
				}
			}
		}
		.bar-user {
			list-style-type: none;
			display: flex;
			align-items: center;
			margin-right: 10px;
			padding: 0;
			.v-popover-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #18191c;
				font-size: 14px;
				margin: 0 5px;
			}
			.user-img {
				position: relative;
				box-sizing: content-box;
				// padding-right: 10px;
				width: 50px;
				height: 50px;
				cursor: pointer;
				.img-info {
					width: 38px;
					height: 38px;
					box-sizing: content-box;
					border: 2px solid #fff;
					display: block;
					position: absolute;
					right: 0;
					background-image: url("./images/zhu-1.png");
					background-size: cover;
					border-radius: 50%;
					margin: 0;
					padding: 0;
				}
			}
			.pushWord {
				margin-left: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				// margin-left: 16px;
				width: 90px;
				height: 34px;
				border-radius: 8px;
				background: #fb7299;
				color: #fff;
				text-align: center;
				font-size: 14px;
				line-height: 20px;
				cursor: pointer;
				transition: background-color 0.3s;
				font-weight: 500;
			}
		}
	}
	.class1 {
		position: fixed;
		top: 0;
		background-color: white;
		z-index: 9999;
	}</style>
